<script setup>
import {computed, ref} from "vue";
import {useTagList} from "@/stores/index.js";
import router from "@/router/index.js";
const tagList = computed(() => {

  return  useTagList().getTagList()
})
const targetTab = ref({})
const tagLen = computed(() => {

  return  useTagList().getTagList().length
})
const contextmenuFlag = ref(false)
const refresh = ref(false)
const contentmenuX = ref('')
const contentmenuY = ref('')
const active = computed(() => {
  return  useTagList().getTag().path
})
const handleFlag = (v)=>{
  contextmenuFlag.value = v
}
const closeOthersTags = ()=>{
  useTagList().delOtherTag()
}

const closeAllTags = ()=>{
  useTagList().delAllTag()
  router.push({ path: "/nova/index" })
}

const handleContextmenu = (event)=>{
  let target = event.target;

  targetTab.value = tagList.value.find((item)=>item.label === target.innerText);


  let flag = false;
  if (target.className.indexOf("el-tabs__item") > -1) flag = true;
  else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
    target = target.parentNode;
    flag = true;
  }
  if (flag) {
    event.preventDefault();
    event.stopPropagation();
    contentmenuX.value = event.clientX;
    contentmenuY.value = event.clientY;

    contextmenuFlag.value = true;
  }
  contextmenuFlag.value = false;
}

const handleRefresh = (v)=>{
  console.log(v)

}
const openTag = (item)=>{
  let value = item.props.name
  active.value = value
  const target = tagList.value.find((item)=>item.path === value)
  useTagList().setTag(target)
  router.push({
    path: value
  })
}
const openTag1 = (item)=>{
  let value = item.label
  active.value = value

  router.push({
    path: value
  })
}

const menuTag = (value, action)=>{
  if (action === "remove") {
    const target = tagList.value.find((item)=>item.path === value)
    const key = tagList.value.findIndex(item => item.path === value);
    if (target.path === value) {
      const tag = tagList.value[key - 1]
      useTagList().setTag(tag)
      router.push({
        path: tag.path
      })
    }

    useTagList().delTag(target)
  }
}
</script>

<template>
  <div class="avue-tags"
       @click="handleFlag(false)">
    <!-- tag盒子 -->
    <div v-if="contextmenuFlag"
         class="avue-tags__contentmenu"
         :style="{left:contentmenuX+'px',top:contentmenuY+'px'}">
      <div class="item"
           @click="closeOthersTags(targetTab)">关闭其他</div>
      <div class="item"
           @click="closeAllTags">全部关闭</div>
    </div>
    <div class="avue-tags__box">
      <el-tabs v-model="active"
               type="card"
               @contextmenu="handleContextmenu"
               :closable="tagLen!==1"
               @tab-click="openTag"
               @edit="menuTag"
              >
        <el-tab-pane v-for="(item,index) in tagList"
                     :key="index"
                     :label="item.label"
                     :name="item.path">
          <template #label>
            <span>
              {{item.label}}
              <i class="el-icon-refresh"
                 :class="{'turn':refresh}"
                 @click="handleRefresh(item)"
                 v-if="active===item.path"></i>
            </span>
          </template>

        </el-tab-pane>

      </el-tabs>
      <el-dropdown class="avue-tags__menu">
        <el-button type="primary">
          更多
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="closeOthersTags">关闭其他</el-dropdown-item>
            <el-dropdown-item @click="closeAllTags">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>

<style scoped lang="scss">

</style>